<template>
  <div class="my-wbox my-statistics">
    <el-button type="primary" size="large" @click="onExport" class="my-statistics__btn" :disabled="loading">导出
    </el-button>
    <el-tabs v-model="activeName">
      <el-tab-pane :label="item.name" v-for="item in tabData" :name="item.id">
        <div v-loading="loading" class="my-loading" v-if="loading"></div>
        <h3 v-show="!loading" class="my-title01">{{ title }}</h3>
        <el-table :data="tableData" style="width: 100%" v-show="!loading" class="my-table" size="large">
          <el-table-column :prop="item.prop" :label="item.label" v-for="item in columns" :width="item.width"
            :align="item.align" :sortable="item.sortable" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive, watch } from 'vue'
import { getUserInfo } from '@/global/session'
import { useRouter } from 'vue-router'
import { FunTime } from '@/global/methods'
import http from '@/http/http'
import { ColumnTable } from '@/interface/index'
const router = useRouter()
let tableData = ref<any[]>([])//表格
let tabData = ref<any[]>([])//选项卡
let columns = ref<ColumnTable[]>([])
const time = FunTime('', 'YY-MM-DD-Zh')
let title = ref<string>('')
const loading = ref<boolean>(true)
const activeName = ref<number | string>(1)//选项卡变化
watch(
  () => activeName.value,
  () => {
    loading.value = true
    onPreview()//预览
  }
)

let userInfo = reactive({ roleId: '', townId: '', countryId: '', roleAuth: '', townName: '', countryName: '' })
userInfo = JSON.parse(getUserInfo() as string)
const townId = ref<string>('')//乡镇
const countryId = ref<string>('')//村组

//预览数据
const onPreview = () => {
  let url = ''//接口地址
  if (userInfo.roleId == '1' || userInfo.roleId == '2' || userInfo.roleId == '3') {
    tabData.value = [
      {
        name: `${time}-当日统计表`,
        id: 1
      },
      {
        name: `截止${time}统计表`,
        id: 2
      },
    ]
    //市
    if (activeName.value == '1') {
      title.value = `${time}-(当日)数据统计表`
      //当日统计表
      columns.value = [
        { prop: 'sort', label: '序号', width: '60px', align: 'center' },
        { prop: 'townName', label: '乡镇(街道)', align: 'center' },
        { prop: 'userNum', label: '新增注册摸排人数', align: 'center', sortable: true },
        { prop: 'intoNum', label: '当日入户数', align: 'center', sortable: true },
        { prop: 'extraNum', label: '来返宁总数', align: 'center', sortable: true },
        { prop: 'outCityNum', label: '市外人数', align: 'center', sortable: true },
        { prop: 'inAreaNum', label: '内五区人数', align: 'center', sortable: true },
        { prop: 'otherAreaNum', label: '长沙市其他区县人数', align: 'center', sortable: true },
      ]
      url = '/manage/admin/report/viewMuniCurr'
    } else {
      //全部统计表
      title.value = `截止${time}累计数据统计表`
      columns.value = [
        { prop: 'sort', label: '序号', width: '60px', align: 'center' },
        { prop: 'townName', label: '乡镇(街道)', align: 'center' },
        { prop: 'userNum', label: '注册摸排人数', align: 'center', sortable: true },
        { prop: 'totalNum', label: '总户数', align: 'center', sortable: true },
        { prop: 'beforeIntoNum', label: '截取到前一日入户数', align: 'center', sortable: true, width: '180px' },
        { prop: 'currIntoNum', label: '当日入户数', align: 'center', sortable: true },
        { prop: 'totalIntoNum', label: '总入户数', align: 'center', sortable: true },
        { prop: 'intoRate', label: '入户率', align: 'center' },
        { prop: 'extraNum', label: '来返宁总数', align: 'center', sortable: true },
        { prop: 'outCityNum', label: '市外人数', align: 'center', sortable: true },
        { prop: 'inAreaNum', label: '内五区人数', align: 'center', sortable: true },
        { prop: 'otherAreaNum', label: '长沙市其他区县人数', align: 'center', sortable: true, width: '180px' },
      ]
      url = '/manage/admin/report/viewMuniTotal'
    }
  } else if (userInfo.roleId == '4') {
    townId.value = userInfo.townId
    tabData.value = [
      {
        name: '每个村累计上报表',
        id: 1
      },
      {
        name: '每个村累计上报表--不含组',
        id: 5
      },
      {
        name: '摸排人员当日统计表',
        id: 2
      },
      {
        name: '摸排人员累计上报表',
        id: 3
      },
      {
        name: '摸排人员注册明细表',
        id: 4
      },
    ]
    //镇
    if (activeName.value == '1') {
      //累计上报表
      title.value = `${userInfo.townName}所有村累计入户统计表`
      columns.value = [
        { prop: 'sort', label: '序号', width: '60px', align: 'center' },
        { prop: 'countryCode', label: '村编号', align: 'center' },
        { prop: 'countryName', label: '村名称', align: 'center' },
        { prop: 'groupName', label: '组名称', align: 'center' },
        { prop: 'intoNum', label: '常驻户数累计录入户数', align: 'center', sortable: true, width: '200px' },
        { prop: 'extraNum', label: '外来人口累计录入数', align: 'center', sortable: true, width: '200px' },
      ]
      url = '/manage/admin/report/viewEachCountryTotal'
    } else if (activeName.value == '2') {
      //摸排人员当日统计表
      title.value = `${userInfo.townName}(${time})摸排人员常驻和外来人员统计表`
      columns.value = [
        { prop: 'sort', label: '序号', width: '60px', align: 'center' },
        { prop: 'userName', label: '摸排人员姓名', align: 'center' },
        { prop: 'countryName', label: '所属社区', align: 'center' },
        { prop: 'groupName', label: '所属组', align: 'center' },
        { prop: 'phone', label: '摸排人员电话', align: 'center' },
        { prop: 'intoNum', label: '常驻户数录入户数', align: 'center', sortable: true },
        { prop: 'extraNum', label: '外来人口录入数', align: 'center', sortable: true },
      ]
      url = '/manage/admin/report/viewTownUserCurr'
    } else if (activeName.value == '3') {
      //摸排人员累计上报表
      title.value = `${userInfo.townName}摸排人员累计统计表`
      columns.value = [
        { prop: 'sort', label: '序号', width: '60px', align: 'center' },
        { prop: 'userName', label: '摸排人员姓名', align: 'center' },
        { prop: 'countryName', label: '所属社区', align: 'center' },
        { prop: 'groupName', label: '所属组', align: 'center' },
        { prop: 'phone', label: '摸排人员电话', align: 'center' },
        { prop: 'intoNum', label: '常驻户数累计录入户数', align: 'center', sortable: true },
        { prop: 'extraNum', label: '外来人口累计录入数', align: 'center', sortable: true },
        { prop: 'draftNum', label: '草稿箱数量', align: 'center', sortable: true },
      ]
      url = '/manage/admin/report/viewTownUserTotal'
    } else if (activeName.value == '4') {
      //摸排人员注册明细表
      title.value = `${userInfo.townName}注册人员明细统计表`
      columns.value = [
        { prop: 'sort', label: '序号', width: '60px', align: 'center' },
        { prop: 'countryCode', label: '村编号', align: 'center' },
        { prop: 'countryName', label: '村名称', align: 'center' },
        { prop: 'groupName', label: '组名称', align: 'center' },
        { prop: 'phone', label: '注册人员手机号', align: 'center' },
        { prop: 'userName', label: '注册人员姓名', align: 'center' },
      ]
      url = '/manage/admin/report/viewTownUserDetail'
    } else {
      ////每个村累计上报表--不含组
      title.value = `${userInfo.townName}累计上报表--不含组`
      columns.value = [
        { prop: 'sort', label: '序号', width: '60px', align: 'center' },
        { prop: 'countryCode', label: '村编号', align: 'center' },
        { prop: 'countryName', label: '村名称', align: 'center' },
        { prop: 'intoNum', label: '常驻户数累计录入户数', width: '220px', align: 'center', sortable: true },
        { prop: 'extraNum', label: '外来人口累计录入数', width: '220px', align: 'center', sortable: true },
      ]
      url = '/manage/admin/report/viewNoGroupTotal'
    }

  } else if (userInfo.roleId == '5') {
    //乡
    townId.value = userInfo.townId
    countryId.value = userInfo.countryId
    tabData.value = [
      {
        name: '摸排人员当日统计表',
        id: 1
      },
      {
        name: '摸排人员累计上报表',
        id: 2
      },
      {
        name: '摸排人员注册明细表',
        id: 3
      },
    ]
    if (activeName.value == '1') {
      //摸排人员当日统计表
      title.value = `${userInfo.countryName}(${time})摸排人员常驻和外来人员统计表`
      columns.value = [
        { prop: 'sort', label: '序号', width: '60px', align: 'center' },
        { prop: 'userName', label: '摸排人员姓名', align: 'center' },
        { prop: 'groupName', label: '所属组', align: 'center' },
        { prop: 'phone', label: '摸排人员电话', align: 'center' },
        { prop: 'intoNum', label: '入户数', align: 'center', sortable: true },
        { prop: 'extraNum', label: '外来人员数', align: 'center', sortable: true },
      ]
      url = '/manage/admin/report/viewCountryUserCurr'
    } else if (activeName.value == '2') {
      //摸排人员累计上报表
      title.value = `${userInfo.countryName}摸排人员累计统计表`
      columns.value = [
        { prop: 'sort', label: '序号', width: '60px', align: 'center' },
        { prop: 'userName', label: '摸排人员姓名', align: 'center' },
        { prop: 'groupName', label: '所属组', align: 'center' },
        { prop: 'phone', label: '摸排人员电话', align: 'center' },
        { prop: 'intoNum', label: '入户数', align: 'center', sortable: true },
        { prop: 'extraNum', label: '外来人员数', align: 'center', sortable: true },
        { prop: 'draftNum', label: '草稿箱数量', align: 'center', sortable: true },
      ]
      url = '/manage/admin/report/viewCountryUserTotal'
    } else {
      //摸排人员注册明细表
      title.value = `${userInfo.countryName}注册人员明细统计表`
      columns.value = [
        { prop: 'sort', label: '序号', width: '60px', align: 'center' },
        { prop: 'groupName', label: '组名称', align: 'center' },
        { prop: 'phone', label: '注册人员手机号', align: 'center' },
        { prop: 'userName', label: '注册人员姓名', align: 'center' },
      ]
      url = '/manage/admin/report/viewCountryUserDetail'
    }
  }
  loading.value = true
  onFunApi(url, 1)
}
//导出
const onExport = () => {
  let url = ''//接口地址
  if (userInfo.roleId == '1' || userInfo.roleId == '2' || userInfo.roleId == '3') {
    //市
    if (activeName.value == '1') {
      //当日统计表
      url = '/manage/admin/report/exportMuniCurr'
    } else {
      //全部统计表
      url = '/manage/admin/report/exportMuniTotal'
    }
  } else if (userInfo.roleId == '4') {
    //镇
    if (activeName.value == '1') {
      //累计上报表
      url = '/manage/admin/report/exportEachCountryTotal'
    } else if (activeName.value == '2') {
      //摸排人员当日统计表
      url = '/manage/admin/report/exportTownUserCurr'
    } else if (activeName.value == '3') {
      //摸排人员累计上报表
      url = '/manage/admin/report/exportTownUserTotal'
    } else if (activeName.value == '4') {
      //摸排人员注册明细表
      url = '/manage/admin/report/exportTownUserDetail'
    } else {
      //每个村累计上报表--不含组
      url = '/manage/admin/report/exportNoGroupTotal'
    }

  } else if (userInfo.roleId == '5') {
    //乡
    if (activeName.value == '1') {
      //摸排人员当日统计表
      url = '/manage/admin/report/exportCountryUserCurr'
    } else if (activeName.value == '2') {
      //摸排人员累计上报表
      url = '/manage/admin/report/exportCountryUserTotal'
    } else {
      //摸排人员注册明细表
      url = '/manage/admin/report/exportCountryUserDetail'
    }
  }
  loading.value = true
  onFunApi(url, 2)
}
const onFunApi = async (url: string, num: number) => {
  try {
    let res = await http.get(url)
    if (res?.code === 0 && res.data) {
      if (num === 1) {
        //预览接口之后的逻辑
        let [userNum, intoNum, extraNum, outCityNum, inAreaNum, otherAreaNum, totalNum, beforeIntoNum, currIntoNum, draftNum, totalIntoNum] = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        res.data.forEach(v => {
          userNum = userNum + Number(v.userNum)
          intoNum = intoNum + Number(v.intoNum)
          extraNum = extraNum + Number(v.extraNum)
          outCityNum = outCityNum + Number(v.outCityNum)
          inAreaNum = inAreaNum + Number(v.inAreaNum)
          otherAreaNum = otherAreaNum + Number(v.otherAreaNum)
          totalNum = totalNum + Number(v.totalNum)
          beforeIntoNum = beforeIntoNum + Number(v.beforeIntoNum)
          currIntoNum = currIntoNum + Number(v.currIntoNum)
          draftNum = draftNum + Number(v.draftNum)
          totalIntoNum = totalIntoNum + Number(v.totalIntoNum)
        });

        tableData.value = res.data
        if (userInfo.roleId == '1' || userInfo.roleId == '2' || userInfo.roleId == '3') {
          if (activeName.value == '1') {
            tableData.value.push({
              sort: '汇总',
              townName: '--',
              userNum: userNum,
              intoNum: intoNum,
              extraNum: extraNum,
              outCityNum: outCityNum,
              inAreaNum: inAreaNum,
              otherAreaNum: otherAreaNum
            })

          } else if (activeName.value == '2') {
            tableData.value.push({
              sort: '汇总',
              townName: '--',
              userNum: userNum,
              totalNum: totalNum,
              beforeIntoNum: beforeIntoNum,
              currIntoNum: currIntoNum,
              totalIntoNum: totalIntoNum,
              intoRate: '--',
              intoNum: intoNum,
              extraNum: extraNum,
              outCityNum: outCityNum,
              inAreaNum: inAreaNum,
              otherAreaNum: otherAreaNum
            })
          }
        } else if (userInfo.roleId == '4') {
          if (activeName.value == '1') {
            tableData.value.push({
              sort: '汇总',
              countryCode: '--',
              countryName: '--',
              groupName: '--',
              intoNum: intoNum,
              extraNum: extraNum,
            })
          } else if (activeName.value == '2') {
            tableData.value.push({
              sort: '汇总',
              userName: '--',
              countryName: '--',
              groupName: '--',
              phone: '--',
              intoNum: intoNum,
              extraNum: extraNum,
            })
          } else if (activeName.value == '3') {
            tableData.value.push({
              sort: '汇总',
              userName: '--',
              countryName: '--',
              groupName: '--',
              phone: '--',
              intoNum: intoNum,
              extraNum: extraNum,
              draftNum: draftNum
            })
          } else if (activeName.value == '5') {
            tableData.value.push({
              sort: '汇总',
              countryCode: '--',
              countryName: '--',
              intoNum: intoNum,
              extraNum: extraNum
            })
          }
        } else if (userInfo.roleId == '5') {
          if (activeName.value == '1') {
            tableData.value.push({
              sort: '汇总',
              userName: '--',
              groupName: '--',
              phone: '--',
              intoNum: intoNum,
              extraNum: extraNum,
            })
          } else if (activeName.value == '2') {
            tableData.value.push({
              sort: '汇总',
              userName: '--',
              groupName: '--',
              phone: '--',
              intoNum: intoNum,
              extraNum: extraNum,
              draftNum: draftNum
            })
          }
        }
      } else {
        //导出
        window.open(res.data)
      }
    }
    loading.value = false
  } catch {
    loading.value = false
  }
}
onPreview()//预览
</script>
<style scoped lang='scss'>
.my-statistics {
  position: relative;

  &__btn {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 9999;
  }

  :deep(.el-tabs__item) {
    height: 60px;
    line-height: 40px;
    font-size: 15px;
  }

  :deep(.el-tabs__item.is-active) {
    font-weight: bold;
  }
}

.my-loading {
  width: 100%;
  height: calc(100vh - 200px);
}

.my-table {
  width: 100%;
  border: 1px solid #ebeef5;
  :deep(th.el-table__cell) {
    background: #f2f2f2;
    color: #111;
  }
}

.my-title01 {
  text-align: center;
  margin-bottom: 10px;
}
</style>